<template>
	<view class="detailBox">
		
		<view class="back" :style="{top: top}" @click="goBack()">
			<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
		</view>
		
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<block v-for="(item, index) in imgList" :key="index">
				<swiper-item>
					<view class="swiper-item" @click="proviewImg">
						<image :src="imgUrl + item" mode=""></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
		
		<view class="goodBox">
			<view class="goodTitle">
				{{language == 'zh_CN'? detailInfo.product_name: detailInfo.product_egname}}
			</view>
			
			<view class="detailInfo">
				<view class="dtt">
					<u-divider style="margin:0;" text="商品详情"></u-divider>
				</view>
				
				<view class="detailContent">
					<view class="detailTxt">
						<u-parse :content="detailInfo.product_detail" :tagStyle="style"></u-parse>
					</view>
				</view>
			</view>
		</view>
		
		<u-back-top :scroll-top="scrollTop" duration="500" :iconStyle="iconStyle"></u-back-top>
		
	</view>
</template>

<script>
	import { getProductDetail } from '@/api/login.js';
	import baseUrl from '@/utils/config.js';
	export default {
		data() {
			return {
				// 富文本编辑器内容设置
				style: {
					p: 'color: #666;font-size:28rpx;line-height:40rpx;',
					img: 'width:100%;margin:10rpx 0 0;'
				},
				top: 0,
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
				},
				indicatorDots: false,
				imgUrl: baseUrl,
				autoplay: true,
				interval: 2000,
				duration: 500,
				language: '',
				imgList: [],
				detailInfo: {}
			}
		},
		onShow() {
			this.language = this.$i18n.locale;	
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(opt) {
			this.getDetailInfo(opt.id);
		},
		// 分享
		onShareAppMessage() {
			
		},
		created() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.top = menuButtonInfo.top + 'px';	
		},
		methods: {
			// 获取详情
			getDetailInfo(idd) {
				getProductDetail(idd).then(res=>{
					this.detailInfo = res.data;
					if(res.data.product_img != '') {
						this.imgList = res.data.product_img.split(',');
					} else {
						this.imgList = [];
					}
				});
			},
			// 预览图片
			proviewImg() {
				let zuzu = [];
				this.imgList.forEach(item=>{
					zuzu.push(baseUrl + item);
				})
				uni.previewImage({
					urls: zuzu
				})
			},
			goBack(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.detailBox{
	background-color: #f2f2f2;
	.back {
		z-index: 99999;position: fixed;left: 0;padding-left:25rpx;
	}
	.goodBox{
		padding:20rpx 25rpx;
		.goodTitle{
			background-color:#fff;border-radius: 15rpx;padding:25rpx;
			@include baseFont(28rpx,#000,40rpx);
		}
		.detailTxt{
			padding:10rpx;
			image{
				width:100%;
			}
		}
		.detailInfo{
			background-color:#fff;border-radius: 15rpx;padding:25rpx 10rpx;
			@include baseFont(28rpx,#000,40rpx);margin-top: 25rpx;
			.dtt{
				text-align: center;padding:0 60rpx;
			}
		}
	}
	.swiper{
		height: 700rpx;
		image{
			width:100%;height: 700rpx;display: block;
		}
	}
}
</style>
